<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#content{width:100%;margin:auto;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#ctrlBar span{height:60px;line-height:80px;float:left;}
#ctrlBar span a{line-height:80px;padding:0 20px 4px;color:#fff;font-size:2rem;background:#000;border-radius:40px;}
.am-list-news{max-width:800px;}
.am-list>li{background:#fff;margin-top:20px;border:none;cursor:pointer;}
.am-list li .am-list-thumb{padding:0;overflow:hidden;height:380px;}
.am-list li .am-list-thumb img{width:800px;}
.am-list>li .am-list-main{height:80px;}
.am-list>li .am-list-main .am-comment-avatar{margin-top:10px;}
.am-list>li .am-list-main .am-fl{color:#999;line-height:24px;font-size:16px;text-align:left;}
.am-list>li .am-list-main .hd{white-space:nowrap;color:#111;font-size:18px;font-weight:800;}
.am-list>li .am-u-md-1{line-height:80px;}
</style>
<div id="main" class="am-cf">
<%= include ic/my_banner.html %>
<div id="mynav">
  <div class="nav" onclick="gotoUrl('/my/photostream')">Photostream</div>
  <div class="nav" onclick="gotoUrl('/my/album')">Ablums</div>
  <div class="nav c" onclick="gotoUrl('/my/trip')">Trips</div>
  <div class="nav" onclick="gotoUrl('/my/favorite')">Favorites</div>
  <div class="nav" onclick="gotoUrl('/my/comment')">Comments</div>
</div>
<div id="content">
  <div id="ctrlBar" class="am-cf ml15">
    <span><a href="/my/trip/create">Create new trip</a></span>
  </div>
  <div data-am-widget="list_news" class="am-list-news ml15" >
  <div class="am-list-news-bd">
    <ul class="am-list">
       <!--缩略图在标题左边-->
       <% for(var i=0;i<results.length;i++){ %>
        <li class="am-g" onclick="gotoUrl('/trip/detail?id=<%= results[i].id %>')">
          <div class="am-u-sm-12 am-list-thumb"><img src="/p?id=<%= results[i].get('cover').id %>&w=300" alt="<%= results[i].get('title') %>"/></div>
          <div class=" am-u-sm-12 am-list-main">
              <div class="am-u-sm-12 am-u-md-10 am-padding-xs">
                <div class="am-fl"><img src="<% if(results[i].get('user') && results[i].get('user').get('avatar')){ %><%= results[i].get('user').get('avatar').thumbnailURL(100, 200) %><% }else{ %>/i/default_avatar.png<% } %>" class="am-comment-avatar" /></div>
                <div class="am-fl" style="padding:10px;"><font class="hd"><%= results[i].get('title') %></font><br/>by <%= results[i].get('user').get("displayName") %></div>
              </div>
              <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-eye"></i> <%= results[i].get('clicks') %></div>
              <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-heart-o"></i> <%= results[i].get('likes') %></div>
          </div>
        </li>
        <% } %>
      </ul>
    </div>
  </div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  $(window).resize(function(){
    fixImg();
  });
});

function fixImg(){
  $("#imgList>li").height($("#imgList div").first().width());
  $("#imgList>li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").width()/$(this).children("img").height()>1){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}
</script>
